<template>
  <div class="container">
    <div style="display: flex; background: #fff">
      <img
        :src="avter"
        alt=""
        style="
          border-radius: 25px;
          width: 30px;
          height: 30px;
          margin: 10px 5% 0px 5%;
        "
      />
      <p>{{ positionName }}</p>
    </div>
    <div
      class="divp"
      style="
        height: auto;
        width: 100%;
        padding: 0px 5% 8px 5%;
        background: #fff;
        color: #8d8e8eee;
        font-size: 12px;
      "
      v-html="tiw"
    ></div>
    <div
      style="position: relative; padding-bottom: 0.1px"
      :style="{
        background: `url(${tconstruction}) no-repeat`,
        backgroundSize: '100% 100%',
      }"
    >
      <nav>
        <a
          @click="
            redirectTo(
              '/contract' + '?skill=' + value2 + '&controltab=' + controltab
            )
          "
          style="
            border: 1px solid #fff;
            border-radius: 4px;
            height: 45px;
            color: #fff;
          "
          ><span>个人找活</span></a
        >
        <div style="border: none; padding: 5px 15px">
          <div style="text-align: center">
            <img :src="duration" alt="" style="width: 25px; height: 15px" />
          </div>
          <div style="text-align: center; font-size: 10px; color: #fff">
            切换信息
          </div>
        </div>
        <a class="is-active" style="border-radius: 4px; height: 45px"
          ><span>施工队找活</span></a
        >
      </nav>

      <!--  -->
      <van-row class="menu-container">
        <van-col span="8">
          <van-dropdown-menu class="addressVa" style="" active-color="#EE3F00">
            <van-dropdown-item
              :title="address"
              class="select_area"
              ref="area_item"
            >
              <van-area
                columns-num="2"
                :area-list="areaList"
                @confirm="addConfirm"
                @cancel="hideAreaItem"
                :value="area_code"
              />
            </van-dropdown-item>
          </van-dropdown-menu>
        </van-col>
        <van-col span="8" style="margin: 0 15px">
          <van-dropdown-menu
            class="addressVa"
            style="margin: auto"
            active-color="#EE3F00"
          >
            <van-dropdown-item
              v-model="value2"
              :options="workType"
              @change="changeItem"
            />
          </van-dropdown-menu>
        </van-col>
        <van-col
          @click="publish"
          span="8"
          style="
            background: #ffff01;

            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 25px;
          "
        >
          <b>点击发布</b>
        </van-col>
      </van-row>
    </div>

    <!-- 分隔 -->
    <div
      style="width: 100%; height: 8px; background: #ebebeb"
      v-if="controltab"
    ></div>

    <!-- tab卡 -->
    <div
      style="width: 94%; margin: auto; padding-top: 6px"
      v-if="controltab"
      ref="tabdiv"
    >
      <ul style="width: 100%; float: left; flex-wrap: wrap" ref="tabul">
        <li
          v-for="(vlu, index) in tabvlue"
          :key="vlu.id"
          style="width: 20%; float: left; border-radius: 4px; margin-top: 0px"
          :style="index % 4 != 0 ? 'margin-left: 0%' : null"
          :class="vlu.id == active ? 'getback' : 'pubak'"
          @click="ontap(index, vlu.id)"
        >
          <p style="width: 100%; text-align: center">
            <img v-lazy="vlu.img" alt="" style="width: 2rem" />
            <br />
            <span
              style="
                padding: 0px 2px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 100%;
              "
              class="tanspan"
              >{{ vlu.tab }}</span
            >
          </p>
        </li>
      </ul>
    </div>
    <div style="width: 100%; background: #fff; height: 20px" v-if="controltab">
      <p style="background: #ededed; height: 8px"></p>
    </div>
    <!-- 主体 -->
    <div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="看看其他地区的工种推荐"
        @load="onLoad"
      >
        <div v-for="(item, index) in list" :key="index" :title="item">
          <van-row style="padding-top: 15px" @click="itemClick(item.id)">
            <van-col style="position: relative">
              <img
                :src="getSrc(item, index)"
                style="object-fit: cover; border-radius: 4px"
                width="100px"
                height="100px"
              />
              <img
                v-if="item.finished"
                src="@/assets/images/finish.png"
                style="
                  position: absolute;
                  z-index: 1;
                  width: 100%;
                  left: 50%;
                  top: 50%;
                  margin: auto;
                  transform: translate(-50%, -50%);
                "
              />
            </van-col>
            <van-col
              style="
                width: calc(100% - 100px);
                height: 100px;
                padding-left: 10px;
                display: flex;
                flex-direction: column;
              "
            >
              <div style="flex: 1; display: flex" class="fincell">
                <!-- <p
                  style="
                    display: inline-block;
                    display: flex;
                    color: white;
                    width: auto;
                    height: 20px;
                    padding: 2px 3px;
                    font-size: 12px;
                    align-items: center;
                    text-align: center;
                    border-radius: 4px;
                    margin-top: 5px;
                    background: rgb(134, 209, 164);
                  "
                  :style="{
                    background: item.choiceness == false ? null : '#86d1a4',
                  }"
                >
                  机器
                </p> -->

                <van-cell
                  :title="item.title"
                  label-class="item"
                  title-class="title"
                ></van-cell>
              </div>
              <div class="van-cell__label item">
                {{ item.detail }}
              </div>
              <div style="width: 100%">
                <van-row type="flex" align="center" style="margin-top: 5px">
                  <!-- <van-icon name="info-tools" color="#EE3F00" size="22" /> -->
                  <van-col>
                    <van-tag
                      size="large"
                      class="tag-blue"
                      v-if="item.workType.length > 0"
                      >{{ getHasWkType(item.workType[0]) }}</van-tag
                    >
                    <van-tag
                      size="large"
                      class="tag-blue"
                      style="margin-left: 3px"
                      v-if="item.workType.length > 1"
                      >{{ getHasWkType([item.workType[1]]) }}</van-tag
                    >
                  </van-col>
                </van-row>
                <van-row
                  type="flex"
                  align="bottom"
                  justify="space-between"
                  style="margin-top: 5px; margin-left: 1px"
                >
                  <van-col style="display: flex; align-items: center">
                    <slot v-if="item.city && item.city.length > 6">
                      <van-icon name="location-o" color="#969799" />
                      <span class="cell-span" style="margin-left: 3px">{{
                        item.city.substring(0, 6) + '...'
                      }}</span>
                    </slot>
                    <slot v-else>
                      <van-icon name="location-o" color="#969799" />
                      <span
                        class="cell-span"
                        style="
                          margin-left: 3px;
                          display: inline-block;
                          width: 2.6rem;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                        "
                        >{{ item.city || '地区未知' }}</span
                      >
                    </slot>
                  </van-col>
                  <van-col>
                    <span
                      style="color: #ee3f00; margin-right: 3px; font-size: 12px"
                      >{{ item.staff }}</span
                    >
                    <span class="cell-span">人</span>
                  </van-col>
                  <van-col>
                    <span class="cell-span">{{
                      item.updateTime.substring(0, 10)
                    }}</span>
                  </van-col>
                </van-row>
              </div>
            </van-col>
          </van-row>
          <van-divider
            :style="{
              color: 'rgba(187, 187, 187, 0.38)',
              borderColor: 'rgba(187, 187, 187, 0.38)',
              padding: '15px 16px 0px 16px',
            }"
          ></van-divider>
        </div>
      </van-list>
    </div>

    <div>
      <div
        style="
          width: 100%;
          text-align: center;
          font-size: 18px;
          font-weight: 600;
        "
      >
        更多推荐
      </div>
      <div style="width: 90%; margin: auto; padding-top: 10px">
        <img :src="kswh" alt="" style="width: 100%" />
      </div>
      <van-list
        v-model="loading"
        :finished="finishedMore"
        finished-text="没有更多了"
        @load="onMoreLoad()"
      >
        <div v-for="(item, index) in morelist" :key="index" :title="item">
          <van-row style="padding-top: 15px" @click="itemClick(item.id)">
            <van-col style="position: relative">
              <img
                :src="getSrc(item, index)"
                style="object-fit: cover; border-radius: 4px"
                width="100px"
                height="100px"
              />
              <img
                v-if="item.finished"
                src="@/assets/images/finish.png"
                style="
                  position: absolute;
                  z-index: 1;
                  width: 100%;
                  left: 50%;
                  top: 50%;
                  margin: auto;
                  transform: translate(-50%, -50%);
                "
              />
            </van-col>
            <van-col
              style="
                width: calc(100% - 100px);
                height: 100px;
                padding-left: 10px;
                display: flex;
                flex-direction: column;
              "
            >
              <div style="flex: 1; display: flex" class="fincell">
                <!-- <p
                  style="
                    display: inline-block;
                    display: flex;
                    color: white;
                    width: auto;
                    height: 20px;
                    padding: 2px 3px;
                    font-size: 12px;
                    align-items: center;
                    text-align: center;
                    border-radius: 4px;
                    margin-top: 5px;
                    background: #86d1a4;
                  "
                >
                  机器
                </p> -->
                <van-cell
                  :title="item.title"
                  label-class="item"
                  title-class="title"
                ></van-cell>
              </div>
              <div class="van-cell__label item">
                {{ item.detail }}
              </div>
              <div style="width: 100%">
                <van-row type="flex" align="center" style="margin-top: 5px">
                  <!-- <van-icon name="info-tools" color="#EE3F00" size="22" /> -->

                  <van-col>
                    <van-tag
                      size="large"
                      class="tag-blue"
                      v-if="item.workType.length > 0"
                      >{{ getHasWkType(item.workType[0]) }}</van-tag
                    >
                    <van-tag
                      size="large"
                      class="tag-blue"
                      style="margin-left: 3px"
                      v-if="item.workType.length > 1"
                      >{{ getHasWkType([item.workType[1]]) }}</van-tag
                    >
                  </van-col>
                </van-row>
                <van-row
                  type="flex"
                  align="bottom"
                  justify="space-between"
                  style="margin-top: 5px; margin-left: 1px"
                >
                  <van-col style="display: flex; align-items: center">
                    <slot v-if="item.city && item.city.length > 6">
                      <van-icon name="location-o" color="#969799" />
                      <span
                        class="cell-span"
                        style="
                          margin-left: 3px;
                          display: inline-block;
                          width: 2.2rem;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                        "
                        >{{ item.city.substring(0, 6) + '...' }}</span
                      >
                    </slot>
                    <slot v-else>
                      <van-icon name="location-o" color="#969799" />
                      <span
                        class="cell-span"
                        style="
                          margin-left: 3px;
                          display: inline-block;
                          width: 2.6rem;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                        "
                        >{{ item.city || '地区未知' }}</span
                      >
                    </slot>
                  </van-col>
                  <van-col>
                    <span
                      style="color: #ee3f00; margin-right: 3px; font-size: 12px"
                      >{{ item.staff }}</span
                    >
                    <span class="cell-span">人</span>
                  </van-col>
                  <van-col>
                    <span class="cell-span">{{
                      item.updateTime.substring(0, 10)
                    }}</span>
                  </van-col>
                </van-row>
              </div>
            </van-col>
          </van-row>
          <van-divider
            :style="{
              color: 'rgba(187, 187, 187, 0.38)',
              borderColor: 'rgba(187, 187, 187, 0.38)',
              padding: '15px 16px 0px 16px',
            }"
          ></van-divider>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import {
  Search,
  Row,
  Col,
  DropdownMenu,
  DropdownItem,
  List,
  Icon,
  Uploader,
  Popup,
  Area,
  Tab,
  Tabs,
  Tag,
  Divider,
  Toast,
} from 'vant';
import {
  listTeam,
  updateTeamsStatus,
  deleteTeamsRecord,
  dicItems,
  tishiP,
  authInfo,
  morelistTeam,
  adList,
} from '@/api/api';
import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';
import tconstruction from '@/assets/images/tconstruction.png';
import areaList from '@/views/user/module-address-edit/area_all.json';
import duration from '@/assets/images/protab/duration.png';
import contactwork from '@/assets/images/contactwork.png';
import logo_default from '@/assets/images/logo.jpg';
import anticorrosive from '@/assets/images/protab/anticorrosive.png';
import cement from '@/assets/images/protab/cement.png';
import coating from '@/assets/images/protab/coating.png';
import fireproof from '@/assets/images/protab/fireproof.png';
import floor from '@/assets/images/protab/floor.png';
import gypsum from '@/assets/images/protab/gypsum.png';
import lacquer from '@/assets/images/protab/lacquer.png';
import puttyzi from '@/assets/images/protab/puttyzi.png';
import scribing from '@/assets/images/protab/scribing.png';
import waterproof from '@/assets/images/protab/waterproof.png';
import types_of_work from '@/assets/images/protab/types_of_work.png';
import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import scrollFixed from '@/mixin/scroll-fixed';

export default {
  mixins: [scrollFixed],
  data() {
    return {
      tconstruction,
      avter: '',
      positionName: '',
      memberLevel: '',
      tabvlue: [
        { tab: '腻子施工', value: '建筑内外墙施工', id: 0, img: puttyzi },
        { tab: '涂料施工', value: '钢结构建筑工地', id: 2, img: coating },
        {
          tab: '防水施工',
          value: '建筑内外墙施工',
          id: 5,
          img: waterproof,
        },
        { tab: '真石漆施工', value: '建筑内外墙施工', id: 7, img: lacquer },
        { tab: '粉刷石膏', value: '建筑内外墙施工', id: 14, img: gypsum },
        { tab: '水泥砂浆', value: '家装工程防水补漏', id: 1, img: cement },
        {
          tab: '防火施工',
          value: '防腐保温工程施工',
          id: 3,
          img: fireproof,
        },
        {
          tab: '防腐施工',
          value: '建筑内外墙施工',
          id: 4,
          img: anticorrosive,
        },
        { tab: '划线施工', value: '建筑内外墙施工', id: 8, img: scribing },
        { tab: '地坪施工', value: '建筑内外墙施工', id: 12, img: floor },
        // {
        //   tab: '其他工种',
        //   value: '建筑内外墙施工',
        //   id: 13,
        //   img: types_of_work,
        // },
      ],
      userId: -1,
      areaList: areaList,
      duration,
      contactwork,
      kswh: '',
      address: '地区选择',
      area_code: '',
      list: [],
      morelist: [],
      loading: false,
      finished: false,
      logo_default: logo_default,
      page: 0,
      limit: 10,
      sale: false,
      controltab: false,
      value: '',
      active: 0,
      value2: 0,
      morepage: 0,
      value3: -1,
      workType: [],
      option3: [
        {
          text: '人员构成',
          value: -1,
        },
        {
          text: '<20',
          value: 0,
        },
        {
          text: '20-50',
          value: 1,
        },
        {
          text: '>50',
          value: 2,
        },
      ],
      tiw: '',
      bei: [
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/a8b9myfv9aaff9vdi8ey.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/mqes4omo1web8pbr9kfg.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/gsxkzucq38dye53ktj02.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/nw6bfr5f2j0eg1frveko.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/1fsyv5k37nl0sh5t3c07.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/2ebsg1lfh8hoc0pht53w.jpg',
      ],
      status: ['已下架', '待审核', '审核不通过', '已上线'],
      wkTypeId: 'INFO.WORK.TYPE',
      finishedMore: false,
    };
  },

  created() {
    this.controltab = eval(this.$route.query.controltab);

    authInfo().then((res) => {
      this.userId = res.data.data.userId;
      this.mobile = res.data.data.mobile;
      this.positionName = res.data.data.positionName;
      this.memberLevel = res.data.data.memberLevel;
      this.avter = res.data.data.avatar;
      this.userLevel = res.data.data.userLevel;
      if (this.userLevel < 2) {
        if (this.memberLevel == 1) {
          this.positionName = '金牌会员';
        } else if (this.memberLevel == 2) {
          this.positionName = '普通会员';
        } else if (this.memberLevel == 0 && this.userLevel == 0) {
          this.positionName = '新用户';
        }
      }
    });
    setTimeout(() => {
      let tandiv = this.$refs.tabdiv;
      let tabul = this.$refs.tabul;
      tandiv.style.height = tabul.offsetHeight + 'px';
    }, 260);
    this.initArea();
    this.initWkType();
    adList({ position: 21 }).then((res) => {
      this.kswh = res.data.data.list[0].url;
    });
    tishiP({ code: 'litemall_teams_title' }).then((res) => {
      this.tiw = res.data.data.litemall_teams_title;
    });

    if (getLocalStorage('valuetwo').valuetwo != null) {
      this.value2 = Number(getLocalStorage('valuetwo').valuetwo);
      return;
    }
    if (this.$route.query.skill != undefined) {
      this.value2 = Number(this.$route.query.skill);
      setLocalStorage({ valuetwo: this.$route.query.skill });
    }
  },
  beforeRouteLeave(to, from, next) {
    next();
  },
  methods: {
    ontap(index, id) {
      this.active = id;
      this.value2 = id;
      this.page = 0;
      this.Morepage = 0;
      this.list = [];
      this.onLoad();
      this.onMoreLoad();
    },
    redirectTo(link) {
      this.$router.replace({
        path: link,
      });
    },
    initArea() {
      let area = this.$store.getters.getArea;
      if (area.code != null) {
        this.area_code = area.code;
        this.address = area.city;
      } else {
        this.area_code = '100000';
        this.address = '全国地区';
      }
    },
    getHasWkType(wktype_value) {
      for (let i in this.workType) {
        if (wktype_value == this.workType[i].value) {
          return this.workType[i].text;
        }
      }
    },
    initWkType() {
      dicItems({
        groupId: this.wkTypeId,
      })
        .then((res) => {
          let list = res.data.data.list;
          for (let i in list) {
            let opiton = {
              text: list[i].itemName,
              value: parseInt(list[i].itemValue),
            };
            this.workType.push(opiton);
          }
        })
        .catch(() => {});
    },
    publish() {
      if (this.mobile == undefined || this.mobile == '') {
        //未认证
        Toast('请先验证手机号!');
        this.$router.push(`/check`);
        return;
      } else {
        //已认证
        // setLocalStorage({
        //   userId: this.userId,
        //   mobile: this.mobile,
        // });
        this.$router.push('/info/workers-publish/-1');
      }
    },
    itemClick(id) {
      this.$router.push(`/info/workers-detail/${id}`);
    },
    getSrc(item, id) {
      let image = this.bei[id % 6];
      if (item.imgUrl != null && item.imgUrl != '') {
        image = item.imgUrl;
      }
      return image;
    },
    addConfirm(e) {
      if (e[0].code == '100000') {
        this.area_code = '';
        this.address = '全国地区';
      } else {
        this.area_code = e[1].code;
        this.address = e[1].name;
      }
      this.list = [];
      this.morelist = [];
      this.show = false;
      this.changeItem();
      this.$refs.area_item.toggle();
    },
    hideAreaItem() {
      this.$refs.area_item.toggle();
    },
    changeItem(e) {
      if (e != undefined) {
        if (e.constructor == Number) {
          this.active = e;
          setLocalStorage({ valuetwo: e });
        } else if (e.constructor == String) {
          // setLocalStorage({ personMusterId: e });
        }
      }

      this.page = 0;
      this.list = [];
      this.onLoad();
      this.onMoreLoad();
    },

    onSearch(value) {
      this.value = value;
      this.page = 0;
      this.list = [];
      this.onLoad();
      this.onMoreLoad();
    },

    onLoad() {
      if (this.page != 0 && this.list.length < 10) {
        this.page = 0;
        this.list = [];
      }
      this.page++;
      listTeam({
        page: this.page,
        viewMore: 0,
        limit: this.limit,
        filtername: this.value,
        areaCode: this.area_code,
        skill: this.value2,
        staff: this.value3,
        teamsId: -1,
        userId: -1,
        sort: 'update_time',
      })
        .then((res) => {
          res.data.data.list.forEach((item) => {
            //如果商品包含到期时间，则继续
            if (typeof item.excessTime != 'undefined') {
              //如果现在时间大于过期时间，则显示已结束图标
              if (new Date() > new Date(item.excessTime)) {
                item.finished = true;
              } else {
                item.finished = false;
              }
            } else {
              item.finished = true;
            }
            //如果商品已经下架，则显示结束
            if (item.status !== 3) {
              item.finished = true;
            }
          });
          this.list.push(...res.data.data.list);
          this.loading = false;
          this.finished = res.data.data.page >= res.data.data.pages;
        })
        .catch((e) => {
          this.page--;
          this.loading = false;
          this.finished = true;
        });
    },

    onMoreLoad() {
      if (this.morepage != 0 && this.morelist.length < 10) {
        this.morepage = 0;
        this.morelist = [];
      }
      this.morepage++;
      morelistTeam({
        page: this.morepage,
        limit: 10,
        skill: this.value2,
        areaCode: this.area_code,
        teamsId: -1,
        viewMore: 1,
        userId: -1,
        sort: 'update_time',
      }).then((res) => {
        res.data.data.list.forEach((item) => {
          //如果商品包含到期时间，则继续
          if (typeof item.excessTime != 'undefined') {
            //如果现在时间大于过期时间，则显示已结束图标
            if (new Date() > new Date(item.excessTime)) {
              item.finished = true;
            } else {
              item.finished = false;
            }
          } else {
            item.finished = true;
          }
          //如果商品已经下架，则显示结束
          if (item.status !== 3) {
            item.finished = true;
          }
          this.morelist.push(item);
        });

        this.loading = false;
        this.finishedMore = res.data.data.page >= res.data.data.pages;
      });
    },
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Search.name]: Search,
    [Icon.name]: Icon,
    [Row.name]: Row,
    [Col.name]: Col,
    [List.name]: List,
    [Popup.name]: Popup,
    [Area.name]: Area,
    [Tag.name]: Tag,
    [Divider.name]: Divider,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
  },
};
</script>

<style lang="scss" scoped>
.pubak {
  // background: #ededed;
  .tanspan {
    font-size: 11px;
  }
  // .valuespan {
  //   font-size: 0.5rem;
  // }
}
.getback {
  color: #018dff;
  background: #f0f7fa;
  .tanspan {
    // font-weight: bold;
    font-size: 11.2px;
  }
  // .valuespan {
  //   font-size: 0.52rem;
  // }
}
.fincell {
  .van-cell {
    width: 78%;
    margin: 2px 0 0 8px;
  }
}
.van-tag--large {
  font-size: 12px !important;
  padding: 2px 4px !important;
}
.menu-container {
  display: flex;
  margin: 10px 0;
  .van-col {
    flex: 1 !important;
  }
}
/deep/ .van-field__body {
  padding-right: 8px !important;
}
/deep/.van-dropdown-menu__bar {
  height: auto;
  background: #fd6b54;
  border-radius: 25px;
  .van-dropdown-menu__title::after {
    border-color: transparent transparent #fff #fff;
  }
}

.addressVa /deep/ .van-dropdown-menu__title {
  color: #fff !important;
}
/deep/ .van-picker__cancel,
/deep/ .van-picker__confirm {
  color: #ee3f00;
}

/deep/.van-dropdown-menu__item {
  padding: 0 3% 0 0;
}

/deep/ .van-dropdown-menu {
  background: none;
  box-shadow: 0 0 0;
}

.select_area /deep/ .van-picker__toolbar {
  width: 100%;
  position: absolute;
  bottom: -44px;
}

.van-search__content--round {
  border-radius: 0px !important;
}

.van-search__content {
  background: rgba(0, 0, 0, 0);
}

// /deep/ .van-dropdown-menu {
//   box-shadow: 0 0 0 0;
//   .van-dropdown-menu__item {
//     background: rgb(233, 233, 233);
//     margin-left: 10px;
//      height: 4vh;
//   }
// }
.select_area /deep/ .van-picker__columns {
  margin-bottom: 44px;
}

.spanafter {
  position: relative;
  padding: 0 8px;
  line-height: 18px;
}

.spanafter::after {
  position: absolute;
  top: 50%;
  right: -4px;
  margin-top: -5px;
  border: 3px solid;
  border-color: transparent transparent currentColor currentColor;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0.8;
  content: '';
}

.address {
  text-align: center;
  height: 36px;
  line-height: 36px;
  color: #323233;
  font-size: 15px;
}

.container {
  background-color: white;

  .van-row {
    padding: 0px 15px;

    .van-row {
      padding: 0px;
    }
  }
}
nav {
  display: flex;

  font-weight: bolder;
  padding: 10px 16px 0 16px;

  box-sizing: border-box;
  border-radius: 4px;

  > a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .is-active {
    color: #ff0202;
    background-color: #fff;
  }
}
.van-divider {
  margin: 0px;
  padding-top: 15px;
}

.corner-span {
  width: 40px;
  height: 20px;
  // background-color: #EE3F00;
  border: 1px solid #ee3f00;
  border-radius: 5px;
  font-size: 12px;
  padding: 2px 8px;
}

.van-search {
  padding: 0px;
  height: 24px !important;
}

.title {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 1;
  white-space: normal;
  overflow: hidden;
  color: #969799;
  font-size: 12px;
  font-weight: normal;
  margin-top: 0;
}

.publish {
  line-height: 40px;
  text-align: end;
}

.publish span {
  width: 60px;
  height: 30px;
  background-color: #ee3f00;
  border: 1px solid #ee3f00;
  border-radius: 4px;
  font-size: 14px;
  padding: 5px 7px;
  color: white;
}

.van-cell {
  padding: 0px;
}

.cell-span {
  color: #969799;
  font-size: 12px;
}

/deep/.van-dropdown-menu__item {
  padding: 0 3% 0 0;
}

/deep/ .van-dropdown-menu {
  background: none;
  box-shadow: 0 0 0;
}

/deep/ .van-dropdown-menu {
  box-shadow: 0 0 0 0;

  .van-dropdown-menu__item {
    // margin-left: 6px;
    height: 29px;
    border-radius: 25px;
  }
}
.cell-span {
  color: #969799;
  font-size: 12px;
}
</style>
